<template>
	<view class="container">
		<view class="head">
			<image :src="broadbandDetails.image" mode="widthFix" alt="" />
		</view>
		<view class="detail">
			<u-parse :html="broadbandDetails.details"></u-parse>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			broadbandDetails: {},
			id: ''
		};
	},
	onLoad(options) {
		this.id = options.id
		this.getPackageInfo()
	},
	methods: {
		// 宽带详情查询
		getPackageInfo() {
			this.$request(
				'/api/getPackageInfo',
				{
					id: this.id ? this.id : uni.getStorageSync('userPackageDetailInfo').package_id,
					agent_id: this.agentId ? this.agentId : uni.getStorageSync('userPackageDetailInfo').agent_id
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					this.broadbandDetails = res.data;
				} else {
					uni.showToast({
						title: '获取宽带详情失败',
						icon: 'none'
					});
					return;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	// background-color: #fed6a9;
	.head {
		width: 750rpx;
		image {
			width: 100%;
		}
	}
	.content {
		margin-top: 32rpx;
		.content_receiving {
			width: 750rpx;

			.receiving_box {
				width: 712rpx;
				height: 632rpx;
				background-image: url('../../static/broadband/transact_bg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				// height: 966rpx;
				// background: #fff;
				border-radius: 20rpx;
				margin: 0 auto;

				.buy-recipients-box {
					margin-bottom: 30rpx;
					padding: 70rpx 38rpx 38rpx;

					// 		.buy-recipients-top {
					// 			display: flex;
					// 			align-items: center;

					// 			.buy-recipients-line {
					// 				width: 7rpx;
					// 				height: 32rpx;
					// 				background: #598cf5;
					// 				margin-right: 12rpx;
					// 			}

					// 			.buy-recipients-title {
					// 				font-size: 30rpx;
					// 			}
					// 		}

					.buy-recipients-bottom {
						margin-top: 50rpx;

						// 			.buy-applicant-input-box {
						// 				display: flex;
						// 				align-items: center;
						// 				margin-bottom: 26rpx;
						// 				border-bottom: 1px solid #F0F0F0;
						// 				padding-bottom: 21rpx;

						// 				.buy-applicant-input-title {
						// 					width: 172rpx;
						// 					font-size: 30rpx;
						// 					// margin-right: 55rpx;
						// 				}
						// 			}

						.buy-recipients-all {
							min-height: 84rpx;
							display: flex;
							align-items: center;
							margin-bottom: 28rpx;
							border: 1px solid #fee7a6;
							border-radius: 12rpx;
							padding-right: 26rpx;
							// padding: 10rpx 0 21rpx;
							// border-bottom: 1px solid #F0F0F0;

							.buy-recipients-input-title {
								background-color: #fee7a6;
								width: 172rpx;
								min-height: 84rpx;
								font-size: 30rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 26rpx;
							}
							.code_title {
								position: absolute;
								right: 60rpx;
								font-size: 22rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #499aff;
							}
						}

						.read_box {
							padding-bottom: 20rpx;

							.read_check {
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #262626;

								::v-deep .u-checkbox__label {
									font-size: 24rpx;
								}
							}

							.submit_box {
								margin: 50rpx auto 0;
								width: 463rpx;
								height: 80rpx;
								border-radius: 60rpx;
								text-align: center;
								line-height: 80rpx;
								background: linear-gradient(to bottom, #e02922, #fba05a);
								font-size: 36rpx;
								color: #fff;
								font-weight: bold;

								// .submit_img {
								// 	width: 463rpx;
								// 	height: 94rpx;
								// }
							}
						}

						.buy-recipients-upload {
							position: relative;
							padding: 30rpx 30rpx;

							.front-box {
								// width: 80rpx;
								// height: 80rpx;
								// border: 1px dashed #000;
								text-align: center;
								line-height: 80rpx;

								.front-img-box {
									width: 100%;
									height: 308rpx;

									.front-img {
										width: 100%;
										height: 100%;
									}
								}

								.front-add-box {
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);

									.front-add-img {
										width: 82rpx;
										height: 82rpx;
									}

									.front-add-text {
										font-size: 30rpx;
										font-family: Source Han Sans CN;
										font-weight: 500;
										color: #333333;
										padding-top: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.detail {
		margin-top: 30rpx;
	}
}
</style>
